import React, { useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import { LockOutlined, UserOutlined, SafetyOutlined } from '@ant-design/icons';
import { Button, Form, Input, Row, Col, Divider, Select } from 'antd';
import { setLocale, history, useIntl } from 'umi';

import style from './index.less';
import logoImage from '../../assets/logo.png';
interface IProps {
  setFormNavigation: (value: string | number) => void;
}

const PassWordLogin: React.FC<{}> = (props: IProps) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const { setFormNavigation } = props;
  const [form] = Form.useForm();
  const { Option } = Select;
  const handleSubmit = () => {
    const formData = form.getFieldsValue();
    history.push({
      pathname: '/welcome',
    });
  };

  const handleChange = (value: string) => {
    setLocale(value, false);
  };

  return (
    <div className={style.passwordbox}>
      <div className={style.logoImageBox}>
        <img src={logoImage} alt="" />
      </div>

      <div className={style.frombox}>
        <Form
          form={form}
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
        >
          <Form.Item name="username">
            <Input prefix={<UserOutlined className="site-form-item-icon" />} />
          </Form.Item>
          <Form.Item name="password">
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
            />
          </Form.Item>

          <Form.Item style={{ marginBottom: '0px' }}>
            <Row gutter={(10, 10)}>
              <Col span={15}>
                <Form.Item name="captcha">
                  <Input
                    prefix={<SafetyOutlined className="site-form-item-icon" />}
                  />
                </Form.Item>
              </Col>
              <Col span={8}>
                <div className={style.passwordVerify}>
                  <Button onClick={() => {}}>
                    <img src={logoImage} alt="" />
                  </Button>
                </div>
              </Col>
            </Row>
          </Form.Item>

          <Button
            style={{ width: '100%' }}
            type="primary"
            onClick={() => {
              handleSubmit();
            }}
          >
            {/* 登录 */}
            {t('login.Signin')}
          </Button>
        </Form>
        <div className={style.antbut}>
          <span style={{ paddingLeft: '0px' }}>
            <Button
              type="link"
              style={{ paddingLeft: '0px', width: '70px' }}
              onClick={() => {
                setFormNavigation('2');
              }}
              block
            >
              {/* 忘记密码 */}
              {t('login.forgrtPassword')}
            </Button>
          </span>
          <span>
            <Select
              defaultValue={'zh-CN'}
              style={{ width: 100 }}
              onChange={handleChange}
            >
              <Option value="zh-CN">简体中文</Option>
              <Option value="zh-TW">繁体中文</Option>
              <Option value="en-US">English</Option>
            </Select>
          </span>
        </div>

        <div className={style.formfooter}>
          <a
            href="https://www.allinpayintl.com/ch-zh/us.html"
            style={{ color: 'rgb(69 73 79 / 42%)' }}
          >
            {/* 关于通华 */}
            {t('login.aboutTonghua')}
          </a>
          <Divider type="vertical" />
          <a
            href="https://www.allinpayintl.com/ch-zh/contact.html"
            style={{ color: 'rgb(69 73 79 / 42%)' }}
          >
            {/* 联系我们 */}
            {t('login.contactUs')}
          </a>
        </div>
      </div>
    </div>
  );
};

export default PassWordLogin;
